<template>
    <div class="header-container">
        <div class="header-left flex-box">
            <el-icon @click="store.commit('collapseMenu')">
                <Fold />
            </el-icon>
            <ul class="flex-box">
                <li v-for="(item, index) in selectMenu" :key="item.path" :class="{ selected: route.path === item.path }"
                    class="tab flex-box">
                    <el-icon size="12">
                        <component :is="item.icon" />
                    </el-icon>
                    <!-- 点击文字跳转功能 -->
                    <router-link class="text flex-box" :to="{ path: item.path }">
                        {{ item.name }}
                    </router-link>

                    <el-icon size="12" class="close" @click="closeTab(item,index)">
                        <Close />
                    </el-icon>
                </li>
            </ul>
        </div>
        <div class="header-right">
            <el-dropdown  @command="handleClick">
                <div class="el-dropdown-link flex-box">
                    <el-avatar :src="userInfo.avatar" />
                    <p class="user-name">
                        {{userInfo.name}}
                    </p>
                </div>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="cancel">退出</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>
<script setup>
import { useStore } from 'vuex'
import { computed } from 'vue'
// useRoute代表当前路由对象，useRouter是拿到router实例
import { useRoute,useRouter } from 'vue-router'
// 拿到router实例
const router=useRouter()
// 当前路由对象
const route = useRoute()
// 拿到store实例
const store = useStore()
// 定义计算属性
const selectMenu = computed(() => store.state.menu.selectMenu)

const userInfo=JSON.parse(localStorage.getItem('pz_userInfo'))

// 点击关闭Tag
const closeTab=(item,index)=>{
    store.commit('closeMenu',item)
    // 删除的是非当前页Tag，不做任何操作
    if(route.path!==item.path){
        return
    }
    
    const selectMenuData=selectMenu.value
    // 删除最后一项
    if(index===selectMenuData.length){
        // 如果tag只有一个元素
        if(!selectMenuData.length){
            router.push('/')
        }else{
            router.push({
                path:selectMenuData[index-1].path
            })
        }
    }else{//如果删除的是中间位置tag
        router.push({
            path:selectMenuData[index].path
        })

    }
    
}

const handleClick=(command)=>{
if(command==='cancel'){
    localStorage.removeItem('pz_token')
    localStorage.removeItem('pz_userInfo')
    localStorage.removeItem('pz_v3pz')
    window.location.href=window.location.origin
}
}
</script>
<style lang="less" scoped>
.flex-box {
    display: flex;
    align-items: center;
    height: 100%;
}

.header-container {
    // 子元素默认排成一行
    display: flex;
    // 控制 flex 项目在 主轴（main axis） 上的对齐方式（默认主轴是水平方向）
    justify-content: space-between;
    // 垂直方向居中
    align-items: center;
    height: 100%;
    background-color: #fff;
    padding-right: 25px;

    .header-left {
        height: 100%;

        .icon {
            width: 45px;
            height: 100%;
        }

        .icon:hover {
            background-color: #d7d5d5;
            // 鼠标会变成小手
            cursor: pointer;
        }

        .tab {
            height: 100%;
            padding: 0 10px;

            .text {
                margin: 0 5px;
            }

            .close {
                visibility: hidden;
            }

            &.selected {
                a {
                    color: #409eff;
                }

                i {
                    color: #409eff;
                }

                background-color: #f5f5f5;
            }
        }

        .tab:hover {
            background-color: #d7d5d5;

            .close {
                visibility: inherit;
                color: #333;
                cursor: pointer;
            }
        }
    }

    .header-right {
        .user-name {
            margin-left: 10px;
        }
    }

    a {
        height: 10%;
        color: #333;
        font-size: 15px;

    }
}
</style>